<template>
    <div>
        <van-nav-bar
            title="确认订单"
            left-arrow
            :fixed="true"
            :placeholder="true"
            :z-index="99999"
            @click-left="prev"
        />

        <div class="top">
            <span class="top-map">
                <van-icon name="location-o" size="18px" color="#888" />
            </span>
            <div class="address" @click="showAddress = true">
                <div class="info" v-if="address.tel">
                    <span v-if="address.name">收件人：{{ address.name }}</span>
                    <span v-if="address.tel">手机号：{{ address.tel }}</span>
                </div>
                <div class="info" v-if="!address.tel">
                    <span style="position: relative; top: -5px;">请选择地址</span>
                </div>
                <div class="address-info" v-if="address.address">{{ address.address }}</div>
            </div>
            <span class="arrow-right">
                <van-icon name="arrow" size="18px" color="#888" />
            </span>
        </div>

        <div class="goods">
            <div class="title">
                <span>共{{orderData.item.length}}件商品</span>
            </div>
            <div class="goods-box">
                <div class="goods-item clear" v-for="(item,index) in orderData.item" :key="index">

                    <div class="goods-img">
                        <img :src="item.thumb_image">
                    </div>

                    <div class="goods-info">
                        <div class="t">
                            <span>{{item.title}}</span>
                            <span>￥{{item.sell_price}}</span>
                        </div>
                        <div class="b">
                            <span v-if="item.goods_array">
                                <i v-for="(value,j) in item.goods_array" :key="j">
                                    {{value.name}}：{{value.value}}&nbsp;&nbsp;
                                </i>
                            </span>
                            <span>× {{item.goods_nums}}</span>
                        </div>
                    </div>

                </div>

            </div>
        </div>

        <div class="order">
            <div class="title">
                <span>订单信息</span>
            </div>
            <van-coupon-cell
                v-if="orderData.type != 1"
                :coupons="coupons"
                :chosen-coupon="chosenCoupon"
                @click="showCoupon = true"
            />

            <van-cell-group>
                <van-cell title="商品金额：" :value="'￥'+orderData.real_amount+''" />
                <van-cell title="运费金额：" :value="'￥'+orderData.real_freight+''" />
                <van-cell v-if="orderData.real_point > 0" title="需要积分：" :value="''+orderData.real_point+'积分'" value-class="money" />
                <van-cell title="订单总额：" :value="'￥'+orderData.payable_amount+''" value-class="money" />
            </van-cell-group>
        </div>

        <div class="order">
            <div class="title">
                <span>备注内容</span>
            </div>
            <van-field
                v-model="remarks"
                rows="2"
                autosize
                label="留言"
                type="textarea"
                maxlength="100"
                placeholder="请输入留言"
                show-word-limit
            />
        </div>

        <div class="order">
            <div class="title">
                <span>支付方式</span>
            </div>
            <div class="payment-box">
                <div class="payment-item" @click="selectPayment('wechat')">
                    <span><i class="fa fa-weixin" style="color: #fff;background-color: #41b035;"></i></span>
                    <span :class="{activeColor:payment == 'wechat'}">微信支付</span>
                    <span :class="{active:payment == 'wechat'}"><i class="fa fa-check"></i></span>
                </div>
                <div class="payment-item" @click="selectPayment('balance')">
                    <span><i class="fa fa-jpy" style="color: #fff;background-color: #fe960f;"></i></span>
                    <span :class="{activeColor:payment == 'balance'}">余额支付<i>可用余额: ￥{{orderData.users_price}}元</i></span>
                    <span :class="{active:payment == 'balance'}"><i class="fa fa-check"></i></span>
                </div>
            </div>
        </div>

        <div class="operation-placeholder"></div>
        <div class="operation">
            <span class="amount">
                <i>合计：</i>
                <i>￥{{orderData.order_amount}}</i>
            </span>
            <span class="pay" @click="onOrderSubmit">提交订单</span>
        </div>

        <!-- 地址 -->
        <van-popup
            v-model="showAddress"
            closeable
            close-icon="close"
            position="bottom"
            style="height: 50%;"
        >
            <van-address-list
                v-model="chosenAddressId"
                :list="addressList"
                default-tag-text="默认"
                @add="onAdd"
                @click-item="selectAddress"
            />
        </van-popup>

        <!-- 优惠劵 -->
        <van-popup
            v-model="showCoupon"
            closeable
            close-icon="close"
            position="bottom"
            style="height: 70%; padding-top: 4px;"
        >
            <van-coupon-list
                :coupons="coupons"
                :chosen-coupon="chosenCoupon"
                :disabled-coupons="disabledCoupons"
                :show-exchange-bar="false"
                @change="onChange"
            />
        </van-popup>
    </div>
</template>

<script>
import { NavBar } from 'vant';
import { Cell, CellGroup,Toast } from 'vant';
import { Icon } from 'vant';
import { Field } from 'vant';
import { CouponCell, CouponList, Popup, AddressList } from 'vant';
export default {
    name: 'CartConfirm',
    components: {
        [NavBar.name]: NavBar,
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Icon.name]: Icon,
        [Field.name]: Field,
        [Popup.name]: Popup,
        [CouponCell.name]: CouponCell,
        [CouponList.name]: CouponList,
        [AddressList.name]: AddressList,
    },
    data() {
        return {
            address:{
                id: "",
                name: "",
                tel: "",
                address: ""
            },
            showAddress: false,
            chosenAddressId: '0',
            bonusId: '0',
            addressList: [],
            orderData: {
                item:{},
                real_amount: 0.00,
                real_freight: 0.00,
                payable_amount: 0.00,
                order_amount: 0.00,
                users_price:0.00,
                real_point: 0,
                type: 0
            },
            remarks: "",
            payment: "wechat",
            showCoupon: false,
            chosenCoupon: -1,
            coupons: [],
            disabledCoupons: [],
            params:null,
            orderBtnFlag:false
        };
    },
    created() {
        let type = this.$route.query.type;
        let id = this.$route.query.id;
        let params = {
            id: id,type: type
        };

        if(type == undefined){
            this.$tools.prev();
        }

        if(this.$tools.in_array(type,["buy","point","second","regiment","special","activity"])){
            params.sku_id = this.$route.query.sku_id;
            params.num = this.$route.query.num;
            if(this.$route.query.kid){
                params.kid = this.$route.query.kid;
            }
        }

        this.params = params;
        this.onLoadOrder();
    },
    methods: {
        onLoadOrder(){
            Toast.loading({
                message: '加载中...',
                forbidClick: true,
                loadingType: 'spinner',
                duration: 0
            });
            this.$http.getCartConfirm(this.params).then((res)=>{
                Toast.clear();
                if(res.status){
                    this.orderData = res.data;
                    let order_address_id = this.$storage.get("ORDER_ADDRESS_ID");
                    if(order_address_id){
                        for(let obj in res.data.address.list){
                            if(res.data.address.list[obj].id == order_address_id){
                                this.chosenAddressId = res.data.address.list[obj].id;
                                this.address = res.data.address.list[obj];
                                //this.$storage.delete("ORDER_ADDRESS_ID");
                                break;
                            }
                        }
                    } else if(res.data.address.default){
                        this.chosenAddressId = res.data.address.default.id;
                        this.address = res.data.address.default;
                    }

                    if(res.data.address.list.length){
                        this.addressList = res.data.address.list;
                    }

                    this.coupons = res.data.bonus.y;
                    this.disabledCoupons = res.data.bonus.n;
                }else{
                    Toast(res.info);
                }
            });
        },
        prev(){
            this.$tools.prev();
        },
        onOrderSubmit(){
            if(this.orderBtnFlag){
                return false;
            }

            this.orderBtnFlag = true;
            Toast.loading({
                message: '加载中...',
                forbidClick: true,
                loadingType: 'spinner',
                duration: 0
            });

            let params = {};
            Object.assign(params,{
                id: this.params.id,
                type: this.params.type,
                address_id: this.chosenAddressId,
                bonus_id: this.bonusId,
                payment: this.payment,
                remarks: this.remarks,
                source: this.$tools.isWeiXin() ? 2 : 1,
                url: document.location.href
            },this.params);
            this.$http.createOrder(params).then((res)=>{
                Toast.clear();
                if(res.status){
                    this.resultOrderData(res.data);
                }else{
                    Toast(res.info);
                }
                this.orderBtnFlag = false;
            }).catch((err)=>{
                Toast.clear();
                Toast("网络连接错误，请检查网络是否可用");
                this.orderBtnFlag = false;
            });
        },
        resultOrderData(data){
            this.$store.commit("UPDATECART",data.shop_count);
            switch (data.pay+"") {
                case "0":
                    this.$router.replace('/order/detail/'+data.order_id);
                    break;
                case "1":
                    this.$wx.config(data.result.config);
                    var options = data.result.options;
                    options.success = function(){
                        Toast("支付成功");
                        setTimeout(()=>{
                            this.$router.replace('/order/detail/'+data.order_id);
                        },1500);
                    }
                    this.$wx.chooseWXPay(options);
                    break;
                case "2":
                    location.href = data.result.url+"&redirect_url="+location.origin+'/order/detail/'+data.order_id;
                    break;
                case "99":
                    this.$storage.set("order_msg",data.msg);
                    this.$storage.set("order_id",data.order_id);
                    this.$router.replace('/cart/info');
                    break;

            }
        },
        selectPayment(value){
            this.payment = value;
        },
        onChange(index) {
            this.showCoupon = false;
            this.chosenCoupon = index;
            if(index != -1){
                this.params.bonus_id = this.coupons[index].id;
            }else{
                this.params.bonus_id = 0;
            }

            this.bonusId = this.params.bonus_id;
            this.onLoadOrder();
        },
        onAdd() {
            this.$router.push({ path: '/ucenter/address/add' });
        },
        selectAddress(item, index){
            this.showAddress = false;
            this.chosenAddressId = this.addressList[index].id;
            this.params.address_id = this.chosenAddressId;
            this.address = this.addressList[index];
            this.onLoadOrder();
        }
    },
}
</script>

<style lang="scss" scoped>
.money{ color: #fc4141; }
.van-address-item__edit { display: none; }
.top{
    background-color: #fff;
    position: relative;
    &:before{
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 2px;
        background: -webkit-repeating-linear-gradient(135deg,#ff6c6c 0,#ff6c6c 20%,transparent 0,transparent 25%,#1989fa 0,#1989fa 45%,transparent 0,transparent 50%);
        background: repeating-linear-gradient(-45deg,#ff6c6c 0,#ff6c6c 20%,transparent 0,transparent 25%,#1989fa 0,#1989fa 45%,transparent 0,transparent 50%);
        background-size: 80px;
        content: '';
    }
    .top-map{
        width: 30px;
        height: 30px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 10px;
    }
    .arrow-right{
        width: 30px;
        height: 30px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0px;
    }
    .address{
        font-size: 14px;
        width: 85%;
        margin: 0 auto;
        padding: 10px 0px;
        padding-left: 20px;
        position: relative;
        .info{
            height: 30px;
            line-height: 30px;
            span:first-child{
                padding-right: 10px;
            }
            span:last-child{

            }
        }
        .address-info{
            height: 30px;
            line-height: 20px;
        }
    }
}
.goods{
    background-color: #fff;
    margin-top: 15px;
    padding-bottom: 10px;
    .title{
        width: 100%;
        margin: 0 auto;
        color: #666;
        font-size: 14px;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #eee;
        span {
            padding-left: 10px;
        }
    }
    .goods-box{
        padding: 0 16px;
        .goods-item {
            padding-top: 10px;
            .goods-img {
                width: 77px;
                height: 77px;
                display: inline-block;
                float: left;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .goods-info {
                display: inline-block;
                width: 72%;
                font-size: 14px;
                float: right;
                i{
                    font-style: normal;
                }
                .t {
                    width: 100%;
                    height: 45px;
                    span:first-child{
                        float: left;
                        display: -webkit-box;overflow: hidden;-webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        width: 70%;
                    }
                    span:last-child{
                        width: 30%;
                        float: right;
                        text-align: right;
                    }
                }
                .b{
                    width: 100%;
                    height: 40px;
                    font-size: 13px;
                    span:first-child{
                        float: left;
                        color: #999;
                    }
                    span:last-child{
                        float: right;
                        color: #666;
                    }
                }
            }
        }
    }
}
.order{
    background-color: #fff;
    margin-top: 15px;
    padding-bottom: 10px;
    .title{
        width: 100%;
        margin: 0 auto;
        color: #666;
        font-size: 14px;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #eee;
        span {
            padding-left: 10px;
        }
    }
    .payment-box{
        .payment-item{
            padding: 10px 16px;
            border-bottom: 1px solid #eee;
            span:first-child{
                font-size: 15px;
                i{
                    width: 20px;
                    height: 20px;
                    line-height:20px;
                    text-align: center;
                    border-radius:50%;
                    padding: 2px;
                }
            }
            span:nth-child(2){
                font-size: 15px;
                padding-left: 10px;
                i{
                    font-size: 12px;
                    font-style: normal;
                    color: #999;
                    padding-left: 10px;
                }
            }
            span:nth-child(3){
                float: right;
                display: none;
                color: #999;
            }
            span.active{
                display: block;
            }
            span.activeColor{
                color: red;
            }
        }
    }
}
.operation-placeholder{
    width: 100%;
    height: 70px;
    line-height: 70px;
}
.operation{
    width: 100%;
    height: 55px;
    line-height: 55px;
    text-align: right;
    background-color: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    border-top: 1px solid #eee;
    span{
        font-size: 14px;
        text-align: center;
        border-radius: 15px;
        background-color: #fff;
        padding: 8px 15px;
        margin-right: 10px;
    }
    .amount{
        float: left;
        padding-top: 0;
        i{
            font-style: normal;
            font-size: 16px;
            color: #555;
        }
        i:last-child{
            color: #db1111;
            font-size: 17px;
            position: relative;
            top: 1px;
        }
    }
    span.cancel{
        color: #333;
        border: 1px solid #ddd;
    }
    span.pay {
        background-color: #e93323;
        color: #fff;
    }
}
</style>
